<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}

{% block title %}
    -主页
{% endblock %}

{% block css %}
    {% static 'css/index.css' %}

{% endblock %}
{% block indexHighlight %}
    active
{% endblock %}
{% block main_block %}
    {% if messages %}
        <script>
            {% for msg in messages %}
                alert('{{ msg.message }}');
            {% endfor %}
        </script>
    {% endif %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        {% if successInfo %}
            <div class="text-center welcomeSlogan"><strong>{{ successInfo }}</strong></div>
        {% elif failedInfo %}
            <div class="text-center welcomeSlogan"><strong>{{ failedInfo }}</strong></div>
        {% elif user.is_authenticated %}
            <div class="text-center welcomeSlogan">
                <strong>欢迎登录实验药品管理系统,下面是药品信息</strong>
            </div>
        {% else %}
            <div class="text-center welcomeSlogan"><strong>欢迎登录实验药品管理系统,您还未登录</strong></div>
        {% endif %}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div id="table-responsive">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th scope="col">序号</th>
                <th scope="col">药品编号</th>
                <th scope="col">药品名</th>
                <th scope="col">药品剩余量</th>
                <th scope="col">状态|操作</th>
            </tr>
            </thead>
            <tbody class="no_underline">
            {#            遍历药品信息表#}
            {% for medicine in medicineList %}
                {#                判断药品剩余量是否等于0#}
                {% if medicine.nowtotal == 0 %}
                    <tr class="table">
                        <th class="text-dark" scope="row">{{ forloop.counter }}</th>
                        <td class="text-dark" id="line_through">{{ medicine.number }}</td>
                        <td class="text-dark" id="line_through">
                            <a href="{% url 'Lab:medicineDetail' medicine.id %}">{{ medicine.name }}</a>
                        </td>
                        <td class="text-dark" id="line_through">{{ medicine.nowtotal }} g/ml</td>
                        <td>
                            <button type="button" class="btn btn-warning btn-sm">暂时短缺</button>
                            <button type="button" class="btn btn-info btn-sm">无法借用
                            </button>
                        </td>
                    </tr>
                    {#                    判断药品剩余量是否大于0且小于等于60#}
                {% elif medicine.nowtotal <= 60 %}
                    <tr class="table">
                        <th class="text-dark" scope="row">{{ forloop.counter }}</th>
                        <td class="text-dark">{{ medicine.number }}</td>
                        <td class="text-dark">
                            <a href="{% url 'Lab:medicineDetail' medicine.id %}">{{ medicine.name }}</a>
                        </td>
                        <td class="text-dark">{{ medicine.nowtotal }} g/ml</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm">库存紧张</button>
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal{{ medicine.id }}" id="addStudent">点击借用
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal{{ medicine.id }}" tabindex="-1" role="dialog"
                                 aria-labelledby="myModal{{ medicine.id }}Label"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document" id="stuadd_modal">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModal{{ medicine.id }}Label">
                                                请确认借用</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            确认要借用该药品 &nbsp;<strong>{{ medicine.name }}&nbsp; </strong>吗？
                                            <br>
                                            <form action="{% url 'Lab:subAndBo' medicine.id %}" method="post">
                                                {% csrf_token %}
                                                <div class="form-group">
                                                    <label for="id_medicineUsedNum"
                                                           class="col-sm-4 control-label">数量：</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control"
                                                               name="medicineUsedNum"
                                                               id="id_medicineUsedNum" required
                                                               oninput="value=value.replace(/[^\d]/g,'')"
                                                               placeholder="借用药品数量（g/ml）">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="id_lab"
                                                           class="col-sm-4 control-label">实验室：</label>
                                                    <div class="col-sm-8">
                                                        {#                                                        <input type="text" class="form-control" name="lab"#}
                                                        {#                                                               id="id_lab" required placeholder="请输入实验室名称">#}
                                                        <select class="form-control" name="lab_id">
                                                            {% for item in LabList %}
                                                                <option value="{{ item.id }}">{{ item.name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">确认</button>
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">取消
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr class="table">
                        <th class="text" scope="row">{{ forloop.counter }}</th>
                        <td class="text">{{ medicine.number }}</td>
                        <td class="text">
                            <a href="{% url 'Lab:medicineDetail' medicine.id %}">{{ medicine.name }}</a>
                        </td>
                        <td class="text">{{ medicine.nowtotal }} g/ml</td>
                        <td>
                            <button type="button" class="btn btn-success btn-sm">库存充足
                            </button>

                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal{{ medicine.id }}" id="addStudent">点击借用
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal{{ medicine.id }}" tabindex="-1" role="dialog"
                                 aria-labelledby="myModal{{ medicine.id }}Label"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document" id="stuadd_modal">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModal{{ medicine.id }}Label">
                                                请确认借用</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            确认要借用该药品&nbsp;<strong>{{ medicine.name }}&nbsp;</strong>吗？
                                            <br>
                                            <form action="{% url 'Lab:subAndBo' medicine.id %}" method="post">
                                                {% csrf_token %}
                                                <div class="form-group">
                                                    <label for="id_medicineUsedNum"
                                                           class="col-sm-4 control-label">数量：</label>
                                                    <div class="col-sm-8">

                                                        <input type="text" class="form-control"
                                                               name="medicineUsedNum"
                                                               id="id_medicineUsedNum" required
                                                               oninput="value=value.replace(/[^\d]/g,'')"
                                                               placeholder="借用药品数量（g/ml）">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="id_lab"
                                                           class="col-sm-4 control-label">实验室：</label>
                                                    <div class="col-sm-8">
                                                        {#                                                        <input type="text" class="form-control" name="lab"#}
                                                        {#                                                               id="id_lab" required placeholder="请输入实验室名称">#}
                                                        <select class="form-control" name="lab_id">
                                                            {% for item in LabList %}
                                                                <option value="{{ item.id }}">{{ item.name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">确认</button>
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">取消
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                {% endif %}
            {% endfor %}
            </tbody>
        </table>
    </div>
    {#主体代码结束#}


    {# 实现分页标签的代码 #}
    {# 这里使用 bootstrap 渲染页面 #}

    <div id="pages">
        <nav>
            <ul class="pagination">
                {% if medicineList.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ medicineList.previous_page_number }}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link">上一页</span></li>
                {% endif %}
                {#循环遍历所有页码。#}
                {% for i in paginator.num_pages %}
                    {% if medicineList.number == i %}
                        <li class="page-item active"><span class="page-link"> {{ i }}
                    <span class="sr-only">(current)</span></span></li>
                    {% else %}
                        <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                <li class="page-item"><a class="page-link">第{{ medicineList.number }}页</a></li>
                {% if medicineList.has_next %}
                    <li class="page-item"><a class="page-link"
                                             href="?page={{ medicineList.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link">下一页</span></li>
                {% endif %}
            </ul>
        </nav>
    </div>

{% endblock %}